<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{ margin:0; padding:0; font-family:"微软雅黑";}
	#outer{ background:url(game_bg.jpg) 0 0 no-repeat; height:480px; width:320px; position:relative;margin: 0 auto;}
	#fraction{ position:absolute; font-weight:bold; font-size:16px; color:white; left:65px; top:13px;}
	#time{ position:absolute; background:url(progress.png) 0 0 no-repeat; width:180px; height:16px; left: 63px;top: 66px;}
	#wolfs img{ position:absolute;}
	#menu{ position:absolute; width:320px; text-align:center; left:0; top:200px;}
	#start,#handle,#end{ line-height:50px; font-size:30px; font-weight:bold; color:#F00; display:block; text-decoration:none;}
	#end{ position:absolute; width:320px; text-align:center; top:200px; left:0; display:none;}
	#reload{color: #f00;font-size: 30px;position: absolute;bottom: 0px;display:none;}
	#baffle{width:320px;height:440px;color:#f00;font-size:30px;position:absolute;top:0px;left:0px;display:none;}
	</style>
</head>
<body>
<div id="outer">
	<div id="fraction">0</div>
    <div id="time"></div>
    <div id="wolfs">
    </div>
    <div id="menu">
        <a href="#" id="start">start</a>
    </div>
    <div id="end">你玩完啦!</div>
    <a id='reload'>重新开始</a>
    <div id="baffle">&nbsp;</div>
</div>
<script type="text/javascript">
	//锅打灰太狼游戏
	var timer = document.getElementById("time"), //进度条
		wolfHoles = document.getElementById("wolfs"), //进度条
		startBtn = document.getElementById("start"),//开始按钮
		end = document.getElementById("end"),//结束语
		reload = document.getElementById("reload"),//重新开始
		liftCircle = [0,1,2,3,4,5,4,3,2,1,0],//动画周期
		fraction = document.getElementById("fraction"),
		score = 0,//分数
		//洞穴坐标
		arrPos = [{l:"98px",t:"115px"},{l:"17px",t:"160px"},{l:"15px",t:"221px"},{l:"30px",t:"294px"},{l:"122px",t:"274px"},{l:"207px",t:"296px"},{l:"200px",t:"212px"},{l:"187px",t:"142px"},{l:"100px",t:"192px"}];
		//进度条处理
		function time(){
			var timeInterval = setInterval(function(){
				timer.style.width = timer.offsetWidth-3+"px";
				//进度条长度小于等于0时，清掉当前计时器
				if(timer.offsetWidth<=0){
					clearInterval(timeInterval);
					//重新开始,结束语
					reload.style.display = "block";
					end.style.display = "block";

				}
			},1000)
		}
		

		//开始按钮事件
		startBtn.onclick = function(){
			//开始计时
			time();
			var main = setInterval(function(){
				if(timer.offsetWidth > 0){
					createWolf();
				}else{
					clearInterval(main);
				}
			},1000);
			
			
			//隐藏开始按钮
			this.style.display = "none";
		}
		//重新开始事件
		reload.onclick = function(){
			//刷新页面
			window.location.reload();
		}
		//狼生成的函数
		function createWolf(){
			var count = rand(8,0);
			if(arrPos[count].index == true){
				createWolf();
				return;
			}
			var wolf = document.createElement("img");
			//狼种类

			wolf.wolfType = rand(9,0)>2?"h":"x";
			//狼的初始图片
			wolf.src = wolf.wolfType+0+".png";
			wolfHoles.appendChild(wolf);
			//设置洞穴坐标
			
			var position = arrPos[count];
			wolf.style.left = position.l;
			wolf.style.top = position.t;
			arrPos[count].index = true;

			var tmp = 0;
			//播放狼出现 逃跑动画
			var wolfinterval = setInterval(function(){
				tmp++;
				wolf.src = wolf.wolfType+liftCircle[tmp]+".png";
				if(tmp == liftCircle.length-1){
					clearInterval(wolfinterval);
					wolfHoles.removeChild(wolf);
					arrPos[count].index=false;
				}

			},100);
		var isclick =false;

		//绑定打击事件
		wolf.onclick = function(e){
			e = e||window.event;
			e.preventDefault();
			if(isclick){return;}
			isclick = true;
			scoreNum(wolf.wolfType);
			//终止原动画
			clearInterval(wolfinterval);
			tmp = 6;
			var hit = setInterval(function(){
				wolf.src = wolf.wolfType+tmp+".png";
				tmp++;
				if(tmp ==10){
					clearInterval(hit);
					wolfHoles.removeChild(wolf);
					arrPos[count].index=false;
				}

			},100)

		}

		}
		//创建随机函数
		function rand(max,min){
			return Math.round((max-min)*Math.random()+min);
		}
		//积分函数
		function scoreNum(wolfType){
			
			if(wolfType == "h"){
				score += 10;
			}else{
				score -=10;
			}
			fraction.innerHTML = score;
		}
</script>
</body>
</html>